{% extends 'layout.html' %}
{% block css %}
    <link rel="stylesheet" href="/static/ztree/css/bootstrapStyle/bootstrapStyle.css" type="text/css">
    <style>
        .redstar::before {
            content: '*';
            color: red;
        }

    </style>
{% endblock %}

{% block content %}

    <section id="main-content">
        <div class="row">
            <div class="col-lg-12">


                <div class="card">
                    <div class="">
                        <div class="col-md-3" style="float: right;top:-8px">
                            <form action="{% url 'apitests:api_case_auto' %}" method="get">
                                <div class="input-group">

                                    <input type="text" id="search_text" name="Search" class="form-control"
                                           placeholder="Search Round" style="border-radius:20px"
                                           value="{{ search_text }}">
                                    <span class="input-group-btn">
                                    <button class="btn btn-primary btn-group-right search_btn"
                                            type="submit"><i
                                            class="ti-search"></i></button></span>
                                </div>
                            </form>
                        </div>
                    </div>
                    {#列表#}
                    <div class="card-body">
                        <div class="table-responsive" style="text-align: center;">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>用例名称</th>
                                    <th>结果</th>
                                    <th>状态</th>
                                    <th>测试时间</th>
                                    <th>测试人</th>
                                    <th style="text-align: center">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for report in obj_list.object_list %}
                                    <tr>
                                        <th>{{ report.title }}</th>
                                        <th>
                                            <div class="progress" style="height: 30px;">
                                                <div class="progress-bar bg-success"
                                                     role="progressbar"
                                                     style="width: {{ report.pass_rate }}%"
                                                     aria-valuenow="{{ report.pass_rate }}"
                                                     aria-valuemin="0" aria-valuemax="100"
                                                     data-toggle="tooltip" data-placement="top"
                                                     title="{{ report.success_count }} / {{ report.test_all_count }} passed">{{ report.pass_rate }}%
                                                </div>
                                            </div>
                                        </th>
                                        <th>
                                            {% if report.status == 1 %}
                                                <span class="badge badge-success ">已完成</span>
                                            {% else %}
                                                <span class="badge badge-pink ">运行中</span>
                                            {% endif %}

                                        </th>
                                        <th>{{ report.create_time }}</th>
                                        <th>{{ report.tester }}</th>
                                        <th style="text-align: center">
                                            <a onclick="test_report_show({{ report.id }})"
                                               style="color: #9373ee; font-size: 14px; cursor: pointer;">查看</a>
                                            <a href="{% url "reports:test_report_download" %}?report_id={{ report.id }}"
                                               style="color: #9373ee; font-size: 14px;margin-left: 0.5rem; cursor: pointer">导出</a>
                                            <a onclick="test_report_del(this, {{ report.id }})"
                                               style="color: #9373ee; font-size: 14px;margin-left: 0.5rem; cursor: pointer;">删除</a>
                                        </th>
                                    </tr>
                                {% endfor %}


                                </tbody>
                            </table>
                        </div>

                    </div>

                </div>
            </div>

        </div>
    </section>
{% endblock %}
{% block paginate %}
    <div class="dataTables_paginate paging_simple_numbers" id="expendable-data-table_paginate">
        <ul class="pagination">

            {% if  obj_list.has_previous %}
                <li class="paginate_button page-item previous "
                    id="expendable-data-table_previous">
                    <a href="?{{ obj_list.previous_page_number.querystring }}"
                       aria-controls="expendable-data-table"
                       data-dt-idx="0" tabindex="0"
                       class="page-link">上一页</a>
                </li>
            {% else %}
                <li class="paginate_button page-item disabled "
                    id="expendable-data-table_previous">
                    <a href="?{{ obj_list.previous_page_number.querystring }}"
                       aria-controls="expendable-data-table"
                       data-dt-idx="0" tabindex="0"
                       class="page-link">上一页</a>
                </li>
            {% endif %}
            {% for page in obj_list.pages %}
                {% if page %}
                    {% ifequal page obj_list.number %}
                        <li class="paginate_button page-item active"><a
                                href="?{{ page.querystring }}"
                                aria-controls="expendable-data-table"
                                data-dt-idx="1" tabindex="0"
                                class="page-link">{{ page }}</a></li>
                    {% else %}
                        <li class="paginate_button page-item "><a href="?{{ page.querystring }}"
                                                                  aria-controls="expendable-data-table"
                                                                  data-dt-idx="2" tabindex="0"
                                                                  class="page-link">{{ page }}</a>
                        </li>
                    {% endifequal %}
                {% else %}
                    <li class="page-item"><a href="" class="page-link">...</a></li>
                {% endif %}
            {% endfor %}

            {% if obj_list.has_next %}
                <li class="paginate_button page-item next" id="expendable-data-table_next">
                    <a href="?{{ obj_list.next_page_number.querystring }}"
                       aria-controls="expendable-data-table"
                       data-dt-idx="4" tabindex="0" class="page-link">下一页</a>
                </li>
            {% else %}
                <li class="paginate_button page-item disabled" id="expendable-data-table_next">
                    <a href="?{{ obj_list.next_page_number.querystring }}"
                       aria-controls="expendable-data-table"
                       data-dt-idx="4" tabindex="0" class="page-link">下一页</a>
                </li>
            {% endif %}

        </ul>
    </div>
{% endblock %}
{% block js %}
    <script>
        function test_report_show(report_id) {
            swal({
                title: "准备自动跳转报告页面",
                timer: 1500,
                showConfirmButton: false,
            });
            var timer = setTimeout(() => {
                window.open("{% url "apitests:report_show" %}" + "?report_id=" + report_id)
                clearTimeout(timer)
            }, 1000)
        }
    </script>
    {#删除#}
    <script>
        function test_report_del(obj, report_id) {
            console.log(report_id)
            swal(
                {
                    title: "您确定要删除这个报告吗 ?",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    closeOnConfirm: false,
                    closeOnCancel: false,
                },
                function (isConfirm) {
                    if (isConfirm) {
                        $.ajax({
                            url: "{% url 'reports:test_report_del' %}",
                            type: "POST",
                            data: {"report_id": report_id},
                            beforeSend: function (xhr) {
                                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                            },
                            success: function (data) {
                                if (data.status) {
                                    swal({
                                        title: '删除成功',
                                        timer: 1000,
                                        showConfirmButton: false,
                                    });
                                    var reprent = obj.parentNode.parentNode;
                                    reprent.remove();
                                }
                            }
                        })

                    } else {
                        swal({
                            title: "Sweet auto close alert !!",
                            timer: 0.5,
                            showConfirmButton: false,
                        });
                    }
                }
            );
        }

    </script>
    <script>
        function project_change() {
            $('#project_change_form').submit()
        }
    </script>
    <script>
        $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip();
        });
    </script>
{% endblock %}